<template>
	<div>
		<!-- header -->
		<header class="l-header">
			<router-link to='/home'><img src="static/jingdianimg/yitsmmpum9qyqqvawsd8619v7i50f4pd.png" class="img_1"></router-link>
			<p>
				慕田峪长城
			</p>	
			<div class="top">
				<a href="javascript:void(0)"><img src="static/jingdianimg/ge38o9xgolc7r57icbjcau8hjjc6alqu.png"></a>	
				<router-link to='/home'><img src="static/jingdianimg/1i6u7z18wre5iksc03t7yagjxbdwvaku.png"></router-link>
				<a href="javascript:void(0)"><img src="static/jingdianimg/66x79xu33yxqxx809vo5zgx5jhx02uz1.png"></a>
			</div>
		</header>
		<!-- l-banner -->
		<div class="l-banner">
			<div class="mengban">
				
			</div>
			<div class="tips">
				<div class="weather">
					<p>26~32°C</p>
				</div>
				<div class="l-name">
					<h4>慕田峪长城</h4>
					<i>5A景区</i>				
				</div>
				<span>5张</span>
			</div>
		</div>
		<!-- wepComment -->
		<div class="l-wepComment">
			<a href="javascript:void(0)" class="l-star">
				<div class="new_star"></div>
				<div class="new_star"></div>
				<div class="new_star"></div>
				<div class="new_star"></div>
				<div class="new_half_star"></div>
				<span>5973条点评</span>
			</a>
			<a href="javascript:void(0)" class="l-location">
				<p>上海市浦东新区世纪大道1号</p>
			</a>
			<a href="javascript:void(0)" class="l-special">
				<p>景点特色</p>
			</a>
		</div>
		<!-- promise -->
		<div class="l-promise">
			<div class="l-pro">
				<p>保证入园</p>
				<p>贵就买</p>
			</div>
		</div>
		<!-- l-gray -->
		<div class="l-gray"></div>
		<!-- ticketsTist -->
		<div class="l-ticketsTist">
			<div class="ticketsTist_title">
				<p class="l-active">订票</p>
				<p>点评</p>
				<p>须知</p>
			</div>
			<div class="l-tickets">
				<p>成人票</p>
			</div>
			<div class="l-tickets_con" v-for='i in list'>
				<div class="l-tickets_con_box">
					<p>{{i.address}}</p>
					<div class="left">
						<p>16:00前可订今日票</p>
						<p>条件退</p>
						<div class="youhui">
							<li>立减10元</li>
							<li>立减15元</li>
						</div>
						<div class="know">
							订票须知
						</div>
					</div>
					<div class="right">
						<div class="right_p">
							<p>￥{{i.soldCount}}</p>
							<h3>￥{{i.newCount}}</h3>起
							<h4>最高返￥{{i.Count}}</h4>
						</div>
						<router-link to="/car" @click.native="add(obj)" class="right_ding">
							<h3>购买</h3>
							<p>在线支付</p>
						</router-link>
					</div>
				</div>
			</div>
			
			<div class="l-tickets">
				<p>儿童票</p>
			</div>
			<div class="l-tickets">
				<p>学生票</p>
			</div>
			<div class="l-tickets">
				<p>老人票</p>
			</div>
			<div class="l-tickets">
				<p>相关票</p>
			</div>
			<div class="l-tickets">
				<p>组合套餐</p>	
			</div>
		</div>
		<!-- l-gray -->
		<div class="l-gray"></div>
		<!-- more_watch -->
		<div class="more_watch">
			<div class="more_watch_title">
				看过本景点的人还看了
			</div>
			<div v-for='i in list'>
				<a href="javascript:void(0)" class="more_pic">
					<div class="pic_a">
						<img :src="i.imgurl">
					</div>
					<div class="pic_price">
						<h3>{{i.title}}</h3>
						<p>{{i.score}}分</p><span>￥{{i.newPrice}}起</span> 
					</div>
				</a>
			</div>
		</div>
	</div>
</template>


<script>
export default {
	data(){
		return{
			list:[],
			obj:[]
		}
	},
	methods:{
		request(i){
			this.$http.get("./static/lvmamaCity.json")
            .then(function(res){
                // console.log(res.body);
				this.list=res.body;
				
				for(var item in this.list){
					if(this.list[item].id==this.$route.params.para){
						this.obj=this.list[item];
					}
				}
            })
		},
		add(obj){
			this.$store.commit("goods",obj)
		}
	},
	mounted(){
		this.request();	
		document.body.scrollTop=0;
	}
}
</script>

<style scoped>
/*header*/
.l-header{
	height: 1.1333rem;
	width: 100%;
	font-size: 0.472222rem;
	background:#fff;
	margin: 0 auto;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1000;
}
.l-header .top{
	margin-right: 0.208333rem;
	display: flex;
	flex-direction: row;
	width: 22%;
	justify-content: space-between;
	align-items: center;
}
.l-header .img_1{
	margin-left: 0.347222rem;
}

/*banner*/
.l-banner{
	margin: 1.1333rem 0 0 0;
	height: 5.5rem;
	width: 100%;
	background:url(../../../static/jingdianimg/dd5c5346-4379-48fb-be4a-6a1c3bcf7b38_1280_.jpg)no-repeat;
	background-size: 100% 100%;
	position: relative;
}
.l-banner .mengban{
    z-index: 1;
    width: 100%;
    height: 2rem;
    position: absolute;
    bottom: 0;
    left: 0;
    background: -webkit-linear-gradient(bottom,rgba(0,0,0,.4),rgba(0,0,0,0));
}
.l-banner .tips{
	color: #fff;
	height: 1.083333rem;
	width: 35%;
	padding: 4.027778rem 0 0 3%;
	/*background:red;*/
}
.l-banner .tips .weather p{
	text-indent: 30%;
	background:url(../../../static/jingdianimg/02.png)left center no-repeat;
}
.l-banner .tips .l-name{
	height: 1.238889rem;
	line-height: 1.238889rem;
}
.l-banner .tips .l-name h4{
	float: left;
	font-size: 0.361111rem;
	margin: 0 5% 0 0;
}
.l-banner .tips span{
	position: absolute;
	bottom: 0.280222rem;
	right: 4%;
	font-size: 0.333333rem;
	text-indent: 6%;
	background:url(../../../static/jingdianimg/banner_camera.png)left center no-repeat;
}
/*l-wepComment*/
.l-wepComment{

}
.l-wepComment .l-star,.l-wepComment .l-location,.l-wepComment .l-special{
	display: inline-block;
	height: 1.083333rem;
	line-height: 1.083333rem;
	width: 100%;
	border-bottom: 2px solid #eeeeee;
	font-size: 0.333333rem;
}
.new_star{
	float: left;
	height: 0.913889rem;
	width: 0.541667rem;
	margin: 0 0 0 .2rem;
	background:url(../../../static/jingdianimg/new_star.png)center 0.277778rem no-repeat;
}
.new_half_star{
	float: left;
	height: 0.913889rem;
	width: 0.541667rem;
	margin: 0 0 0 .2rem;
	background:url(../../../static/jingdianimg/new_half_star.png)center 0.277778rem no-repeat;
}
.l-wepComment .l-star span{
	margin: 0 0 0 3%;
}
.l-wepComment .l-location p{
	font-size: 0.361111rem;
	background:url(../../../static/jingdianimg/l.png)left center no-repeat;
	background-size: 0.575rem 0.55rem;
	margin: 0 0 0 0.205rem;
	text-indent: 0.856111rem;
}
.l-wepComment .l-special p{
	font-size: 0.361111rem;
	background:url(../../../static/jingdianimg/shan.png)left center no-repeat;
	background-size: 0.575rem 0.55rem;
	margin: 0 0 0 0.205rem;
	text-indent: 0.856111rem;
}
/*.promise*/
.l-promise{
	width: 100%;
	height: 1.111111rem;
	line-height: 1.111111rem;
	background:#fafafa;
}
.l-promise .l-pro{
	width: 98%;
	margin: 0 0 0 2%;
	height: 1.111111rem;
}
.l-promise .l-pro p{
	margin: 0 7% 0 0;
	text-indent: 0.444444rem;
	float: left;
	font-size: 0.277778rem;
	background: url(../../../static/jingdianimg/dui.png)left center no-repeat;
}
/*l-gray*/
.l-gray{
	height: 0.277778rem;
	width: 100%;
	background:#efeef6;
}
/*l-ticketsTist*/
.l-ticketsTist{

}
.l-ticketsTist .ticketsTist_title{
	font-size: 0.361111rem;
	display: flex;
	justify-content: space-around;
	height: 1.111111rem;
	line-height: 1.111111rem;
	width: 100%;
	border-bottom: 1px solid #dddddd;
}
.l-active{
	color: #db0577;
	border-bottom: 0.083333rem solid #db0577;
}
.l-ticketsTist .ticketsTist_title p{
	width: 1.055556rem;
	text-align: center;
}
.l-ticketsTist .l-tickets{
	height: 1.25rem;
	width: 100%;
	line-height: 1.25rem;
	font-size: 0.361111rem;
	border-bottom: 1px solid #dcdcdc;
}
.l-ticketsTist .l-tickets p{
	background:url(../../../static/jingdianimg/head.png)left center no-repeat;
	background-size: 0.555556rem 0.555556rem;
	margin: 0 0 0 0.277778rem;
	text-indent: 8%;
}
.l-ticketsTist .l-tickets_con{
	/*display: none;*/
	height: 3.305556rem;
	width: 100%;
	background:#f2f2f2;
	border-bottom: 2px solid #e7e7e7;
}
.l-ticketsTist .l-tickets_con .l-tickets_con_box{
	height: 2.583333rem;
	width: 94%;
	margin:0 auto;
	position: relative;
}
.l-ticketsTist .l-tickets_con .l-tickets_con_box p{
	padding: 0.361111rem 0 0 0;	
}

.l-ticketsTist .l-tickets_con .l-tickets_con_box .left p{
	float: left;
	text-indent: 0.438889rem;
	margin: -0.099444rem 0 0 0;
	font-size: 0.277778rem;
	color: #91b7cc;
	background:url(../../../static/jingdianimg/duihao.png) left bottom no-repeat;
	background-size:0.361111rem 0.361111rem; 
}
.l-ticketsTist .l-tickets_con .l-tickets_con_box .left .youhui{
	clear: both;
	padding: 2% 0;
}
.l-ticketsTist .l-tickets_con .l-tickets_con_box .left .youhui li{
	float: left;
	color: #d5a864;
	height: 0.391111rem;
	width: 16%;
	text-align: center;
	line-height: 0.391111rem;
	border: 2px solid #eba26f;
	margin: 0 1%;
}
.l-ticketsTist .l-tickets_con .l-tickets_con_box .left .know{
	clear: both;
	padding: 5% 0 0 0;
}
.l-ticketsTist .l-tickets_con .l-tickets_con_box .right{
	height: 1.388889rem;
	width: 30%;
	position:absolute;
	bottom: -0.528889rem;
	right: 0;
}
.l-ticketsTist  .right_p{
	font-size: 0.277778rem;
	height: 1.25rem;
	width: 50%;
	float: left;
}
.l-ticketsTist  .right_p p{
	margin: -0.277778rem 0 0 0;
	font-size: 0.277778rem;
	text-decoration: line-through;
}
.l-ticketsTist  .right_p h3{
	color: #cf0771;
	font-size:0.361111rem;
	float: left;
}
.l-ticketsTist  .right_p h4{
	clear: both;
	font-size:0.297778rem;
	color: #cf0771;
	font-weight: normal;
}
.l-ticketsTist  .right_ding{
	display: inline-block;
}
.l-ticketsTist  .right_ding h3{
	color: #fff;
	line-height: 0.833333rem;
	height: 0.833333rem;
	width: 100%;
	text-align: center;
	background:#cf0771;
	border-radius: 0.138889rem 0.138889rem 0 0;
}
.l-ticketsTist  .right_ding p{
	color: #cf0771;
	border: 2px solid #cf0771;
	border-top: none;
	margin: -0.298889rem 0 0 0;
}
/*more_watch*/
.more_watch .more_watch_title{
	line-height: 1.208333rem;
	font-size: 0.361111rem;
	height: 1.208333rem;
	width: 96%;
	margin: 0 auto;
	border-bottom: 1px solid #e3e3e3;
}
.more_watch .more_pic{
	display: inline-block;
	float: left;
	height: 4.805556rem;
	width: 45%;
	margin: 0.416667rem 0.25rem;
}
.more_watch .more_pic .pic_a{
	height: 3.430556rem;	
	/*background:url(/static/jingdianimg/images-200408000000315607D19-R-550-412-R20_480_320.jpg)center center no-repeat;*/
}
.more_watch .more_pic .pic_a img{
	height: 3.430556rem;
	width: 100%;
}
.more_watch .more_pic .pic_price{
	height: 1.375rem;
	width: 100%;
	border: 1px solid #e1e1e1;
	border-top: none;
}
.more_watch .more_pic .pic_price h3{
	font-size: 0.333333rem;
	height: 0.675rem;
	line-height: 0.675rem;
	text-overflow:ellipsis; 
	overflow:hidden; 
	white-space:nowrap;
	width: 90%;

}
.more_watch .more_pic .pic_price p{
	color: #dd7b20;
	font-size: 0.333333rem;
	font-weight: bold;
	float: left;
}
.more_watch .more_pic .pic_price span{
	float: right;
	color: #b9678f;
	font-size: 0.416667rem;
}	
</style>